<template>
  <el-card class="m-8">
    <section slot="header" class="mb-4 flex items-center">

      <!--      <p class="ml-10">用户ID： </p>-->
      <!--      <el-input v-model="dataForm.status" placeholder="请输入用户ID"></el-input>-->

      <!--      <p class="ml-10">模板名称： </p>-->
      <!--      <el-input v-model="dataForm.name" placeholder="请输入模板名称"></el-input>-->

      <!--      <p class="ml-10">状态：</p>-->
      <!--      <el-select v-model="dataForm.status" placeholder="请选择">-->
      <!--        <el-option-->
      <!--          v-for="item in options"-->
      <!--          :key="item.val"-->
      <!--          :label="item.name"-->
      <!--          :value="item.val"-->
      <!--        >-->
      <!--        </el-option>-->
      <!--      </el-select>-->

      <p class="ml-10">进入时间： </p>
      <el-date-picker
        v-model="times"
        class="marginRB10"
        end-placeholder="结束日期"
        range-separator="至"
        start-placeholder="开始日期"
        type="daterange"
        value-format="yyyy-MM-dd"
        @change="handleTimesChange"
      >
      </el-date-picker>


      <el-button class="mr-4" type="info" @click="handleReset();initData()">重置</el-button>
      <el-button class="mr-4" type="primary" @click="initData()">搜索</el-button>

    </section>


    <el-table :data="tableList" align="center" border class="mt-4" stripe>
      <el-table-column label="时间" prop="day"/>
      <el-table-column label="今日送出能量" prop="score"/>
      <el-table-column label="今日用户消耗" prop="score_after"/>
      <el-table-column label="总结余能量" prop="balance"/>
      <el-table-column label="今日兑换用户数" prop="person"/>
      <el-table-column align="center" label="操作" prop="created_at">
        <template slot-scope="{row}">

          <el-button type="primary" @click="handleDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <cus-pagination
      :limit.sync="dataForm.per_page"
      :page.sync="dataForm.page"
      :total="total"
      @pagination="initData"
    />


    <el-dialog v-dialogDrag :visible.sync="detailFormVisible"
               title="兑换物品详情" width="80%"
    >

      <el-table :data="detailTableList" align="center" border class="mt-4" stripe>
        <el-table-column label="物品ID" prop="reward_id"/>
        <el-table-column label="物品名称" prop="note"/>
        <el-table-column label="物品数量" prop="total"></el-table-column>
        <el-table-column label="兑换人数" prop="person"></el-table-column>
        <el-table-column label="兑换消耗能量数" prop="score"></el-table-column>
      </el-table>

    </el-dialog>

  </el-card>
</template>

<script>
import { getDetailEnergy, giftList } from '../../api/guardActivity/energyStatis'

export default {
  data() {
    return {
      rowId: '',
      detailFormVisible: false,

      times: [],
      prizeData: [],
      options: [
        { val: 0, name: '禁用' },
        { val: 1, name: '正常' }
      ],

      tableList: [],
      detailTableList: [],
      dateList: undefined,
      dataForm: {
        page: 1,
        per_page: 10,
        start_time: '',
        end_time: ''
      },
      meta: {
        page: 1,
        per_page: 10
      },
      total: 1
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async handleDetail(row) {
      this.rowId = row.day
      const { data } = await getDetailEnergy(row.day)
      this.detailTableList = data
      this.detailFormVisible = true
    },
    handleTimesChange(val) {
      if (val) {
        this.dataForm.start_time = val[0]
        this.dataForm.end_time = val[1]
      } else {
        this.dataForm.start_time = undefined
        this.dataForm.end_time = undefined
      }

    },
    handleReset() {
      this.times = []
      this.dataForm = {
        page: 1,
        perPage: 10,
        name: ''
      }
    },
    async initData() {
      try {
        const { data } = await giftList(this.dataForm)

        this.tableList = data.data
        this.dataForm.page = data.current_page
        this.total = data.total
      } catch (e) {
        console.error(e)
      }
    }

  }
}
</script>

<style scoped>
.el-input {
  width: 200px;
}

/deep/ .el-table .cell {
  flex-wrap: wrap;
}
</style>
